<template>
  <view class="con">
    <view class="navbarBox">
      <u-icon name="arrow-left" @click="goBack" color="#000" size="24" style="margin-right: 20rpx"></u-icon>
      <u-input placeholder="搜索内容" prefix-icon="search" prefix-icon-style="color:#8dd9d4;font-size:24px"> </u-input>
      <image src="" class="headUrl" mode="aspectFill" @click="goPage('/pages/home/userPage')" />
      <view class="add"><u-icon name="plus" @click="goPage('/pages/home/publishUpdates')"></u-icon></view>
    </view>
    <up-tabs
      :list="list1"
      lineColor="#81D8D0"
      :activeStyle="{
        color: '#333',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
    ></up-tabs>
    <view class="box">
      <view class="item" v-for="(item, index) in 4" :key="index">
        <image class="img" src="" mode="aspectFill" />
        <view class="btm">
          <view class="tit">大声安利私藏好物</view>
          <view class="user">
            <view class="l">
              <u-avatar size="18"></u-avatar>
              用户昵称
            </view>
            <view class="zan">
              <image @click="likeFn(1)" v-if="'1' === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
              <image @click="likeFn(1)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
              <text> 845</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view>
      <view class="gzItem" @click="goPage('/pages/home/communityDetails')">
        <view class="top">
          <image src="" mode="aspectFill" />
          <view class="name">
            <view>用户昵称</view>
            <view class="sj">{{ dayjs().format("MM-DD") }}</view>
          </view>
        </view>
        <u-scroll-list :indicator="false">
          <view v-for="(item, index) in 4" :key="index">
            <image class="pjImg" src="" mode=""></image>
          </view>
        </u-scroll-list>
        <view class="ctn"> 有喜欢宅在家里的小伙伴吗？ 喜欢不停捣鼓家的淘气鬼吗？ 你曾经把自己那方空间打造成什么风格？现在喜欢什么调性呢 </view>
        <view class="fun">
          <view class="zan item1">
            <image @click="likeFn(1)" v-if="'1' === '1'" class="heart" src="../../static/home/dz.png" mode="aspectFill" />
            <image @click="likeFn(1)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
            <text> 845</text>
          </view>
          <view class="item1">
            <image src="../../static/home/pl.png" mode="aspectFill" />
            123</view
          >
          <view class="item1">
            <image src="../../static/home/sc.png" mode="aspectFill" />
            123</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import dayjs from "dayjs";
import { reactive } from "vue";

const list1 = reactive([{ name: "推荐" }, { name: "关注" }]);
const likeFn = async (item: any) => {
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
    --item.likeCount;
  } else {
    item.likeFlag = "1";
    ++item.likeCount;
  }
};
</script>
<style lang="less" scoped>
.con {
  background: linear-gradient(180deg, rgba(92, 203, 193, 0.24) 0%, rgba(92, 203, 193, 0.04) 66%, rgba(92, 203, 193, 0) 100%);
}
.navbarBox {
  padding: 0 20rpx;
}
.headUrl {
  width: 72rpx;
  height: 72rpx;
  background: #a48085;
  border-radius: 50%;
  margin-left: 32rpx;
}
.add {
  width: 64rpx;
  height: 64rpx;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 28rpx;
}
.box {
  column-count: 2;
  margin-top: 30rpx;
}
.item {
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  .btm {
    padding: 18rpx;
  }
  .img {
    width: 100%;
    background: #d3afa2;
  }
  .tit {
    font-size: 28rpx;
    color: #000000;
  }
  .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    .l {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #8a8a8d;
    }
  }
}
.zan {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #8a8a8d;
  .heart {
    width: 36rpx;
    height: 36rpx;
    margin-right: 6rpx;
  }
}
.gzItem {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      background: #9c7046;
    }
    .name {
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      .sj {
        font-size: 24rpx;
        color: #8a8a8d;
      }
    }
  }
  .ctn {
    font-size: 28rpx;
    color: #333333;
    line-height: 42rpx;
  }
  .fun {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 48rpx;
    .item1 {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #8a8a8d;
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 5rpx;
      }
    }
  }
  .pjImg {
    width: 208rpx;
    height: 208rpx;
    border-radius: 16rpx;
    margin-right: 6rpx;
    background: salmon;
  }
}
</style>
